<template>
  <div class="my-userinfo-container">
    <div class="top-box">
      <img :src="userInfo.photo" class="avatar" />
      <div class="nickname">{{ userInfo.name }}</div>
    </div>
    <!-- 操作面板 -->
    <van-cell-group class="action-card">
      <van-cell
        icon="records"
        title="编辑资料"
        is-link
        @click="$router.push({ name: 'user-edit' })"
      />
      <van-cell icon="location-o" title="地址管理" is-link @click="$router.push({ name: 'address-manage' })" />
      <van-cell icon="contact" title="联系客服" is-link />
      <van-cell icon="warning-o" title="退出登录" @click="logout" />
    </van-cell-group>
  </div>
</template>
<script>
import { mapActions,mapState,mapMutations} from 'vuex'
export default {
  computed: {
    ...mapState('m_user', ['userInfo']),
  },
  created(){
    // console.log("231354564")
  this.initUserInfo()
  },
  activated(){
    // console.log("4541231654")
    // this.initUserInfo()
  },
  methods: {
    ...mapActions('m_user',['initUserInfo']),
    ...mapMutations('m_user',['cleanState']),
    async logout() {
      // 展示确认的提示框
      const confirmResult = await this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出登录吗？',
        })
        .catch((err) => {
          // err 是错误的结果
          console.log(err)
          // 这里把 err return 给了 confirmResult
          return err
        })

      // 如果点击了取消，则不执行后续的操作
      if (confirmResult === 'cancel') return

      this.cleanState()
      // 3. 跳转到登录页
    //   this.$router.push('/login')
    },
  },
}
</script>
<style lang="less" scoped>
.my-userinfo-container {
  height: calc(100vh - var(--van-tabbar-height));
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;
  .top-box {
    height: 4rem;
    background-color: #4e8ccd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      display: block;
      width: 2rem;
      height: 2rem;
      border-radius: 2rem;
      border: 2px solid white;
      box-shadow: 0 1px 0.1rem black;
    }

    .nickname {
      color: white;
      font-weight: bold;
      font-size: 0.4rem;
      margin-top: 0.5rem;
    }
  }
}
</style>
>
